<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-button
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="toAddTrademark"
        >添加</el-button
      >
    </div>
    <el-table :data="trademarklist" border style="width: 100%">
      <el-table-column
        label="序号"
        width="70px"
        type="index"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="tmName"
        label="品牌名称"
        width="450px"
        align="left"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="品牌列表"
        width="450px"
        align="center"
      >
        <template v-slot="{ row }">
          <img :src="row.logoUrl" alt="" width="25%" />
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template v-slot="{ row, $index }">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="修改"
            placement="top"
            
          >
            <el-button
              icon="el-icon-edit-outline"
              size="mini"
              type="warning"
              @click="toEdit(row,$index)"
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="删除"
            placement="top"
          >
            <el-button
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="delOnetrademark(row.id)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[3, 5, 10, 20]"
      :page-size="pageSize"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="pagecount"
      :small="small"
    >
    </el-pagination>
    <el-dialog title="添加品牌" :visible.sync="dialogFormVisible">
      <el-form :model="trademarkInfo" >
        <el-form-item label="品牌名称" :label-width="formLabelWidth" prop="tmName">
          <el-input v-model="trademarkInfo.tmName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌logo" :label-width="formLabelWidth" prop="imageUrl" >
          <el-upload
            class="avatar-uploader"
            :action="`http://gmall-h5-api.atguigu.cn/admin/product/fileUpload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploaddata"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </el-card>
</template>

<script lang="js">
import {getBaseTrademark,reqUploadInfo,reqdeleteInfo} from '@/api/product/trademark'
import { Upload } from 'element-ui'


export default {
name:'trademark',
    data() {
      return {
        trademarklist:[],
        currentPage:1,
        pageSize:3,
        small:false,
        pagecount:0,
        imageUrl: '',
        dialogTableVisible: false,
        dialogFormVisible: false,
        formLabelWidth: '120px',
        trademarkInfo:{}
      }
    },
    methods:{
      //获取基本数据
      async getTrademarkList(){
        const result = await getBaseTrademark(this.currentPage,this.pageSize)
        // console.log(result,111)
        this.trademarklist = result.data.records
        this.pagecount = result.data.total
      },
      //选择一页渲染多少条的业务函数
      handleSizeChange(val) {
        this.currentPage = 1
        this.pageSize = val
        this.getTrademarkList()
      },
      //选择第几页应跳转到第几页
      handleCurrentChange(val) {
        this.currentPage = val
        this.getTrademarkList()
      },
      toAddTrademark(){
        this.dialogFormVisible=true
      },
      //上传后的业务函数
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.trademarkInfo.imageUrl = res.data
        
      },
      //上传图片前的校验
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      async uploaddata(){
       const result = await reqUploadInfo(this.trademarkInfo.imageUrl,this.trademarkInfo.tmName)
       if(result.code == 200){
        console.log('成功')
       }
        // if(trademarkInfo){
        //   const result = await reqUploadInfo(trademarkInfo)
        //   console.log(result)
        // }
      },
      //刪除一條trademark邏輯
      delOnetrademark(id){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await reqdeleteInfo(id)
          this.getTrademarkList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        
      },
      async toEdit({id}){
        console.log(id)
      }
    
      
    },
    mounted(){
      this.getTrademarkList()
    }
}
</script>

<style>
.box-card {
  margin: 20px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>